<include file="Public:header"/>
<!--主页面-->
<div id="main-content" class="content">
    <ul class="breadcrumb">
        <li class="active">编辑招聘会</li>
    </ul>
    <div class="page-header clearfix">
        <h3>招聘会</h3>
        
    </div>

    <div class="content-box-content">
        <form action="{:U('Meet/editmeet')}" method="post" class="form-horizontal" role="form">
            <input type="hidden" class="form-control" id="id" name="id" value="{$obj['id']}">

            <div class="form-group">
                <label for="title" class="col-sm-3 control-label">标题：</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="title" name="title" required value="{$obj.title}">
                </div>
            </div>   
            <div class="form-group">
                <label for="open_time" class="col-sm-3 control-label">召开时间</label>
                <div class="col-sm-9">
                  <input type="datetime-local" class="form-control" id="open_time" name="open_time" required value="{$obj.open_time}">
                </div>
            </div>
            <div class="form-group">
                <label for="end_time" class="col-sm-3 control-label">结束时间</label>
                <div class="col-sm-9">
                  <input type="datetime-local" class="form-control" id="end_time" name="end_time" required value="{$obj.end_time}">
                </div>
            </div>
            <div class="form-group skill">
                <label class="col-sm-3 control-label">经度：</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="jd" name="lnt" required value="{$obj.lnt}"/>
                </div>
            </div>
            <div class="form-group skill">
                <label for="lat" class="col-sm-3 control-label">纬度：</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="wd" name="lat" required value="{$obj.lat}"/>
                </div>
            </div>
            <div class="form-group skill">
                <label class="col-sm-3 control-label"></label>
                <div class="col-sm-9">
                    <button class="btn btn-primary" id="test" type="button" data-toggle="modal" data-target="#cancelOrder">获取经纬度</button>
                </div>
            </div>
            <!--获取经纬度弹出框-->
            <div id="map" style="display:none;"  class="modal-dialog" role="document">
                <div  class="modal-content" style="width:800px;height:512px;margin:0 auto">
                    <div style="padding: 5px;" class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="open"><span aria-hidden="true">&times;</span></button>
                        <h4>单击获取点击的经纬度</h4>
                    </div>
                    <div class="modal-body" style="width:795px;height:400px">
                        <style>
                            #container {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
                        </style>
                        <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
                        <script type="text/javascript"
                                src="https://webapi.amap.com/maps?v=1.3&key=c5e14c05b9c3aef7d437cb31cda7313f&plugin=AMap.Autocomplete"></script>
                        <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
                        <div id="container"></div>
                        <div id="myPageTop">
                            <table>
                                <tr>
                                    <td>
                                        <label>按关键字搜索：</label>
                                    </td>
                                    <td class="column2">
                                        <label>左击获取经纬度：</label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="text" placeholder="请输入关键字进行搜索" id="tipinput">
                                    </td>
                                    <td class="column2">
                                        <input type="text" readonly="true" id="lnglat">
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div id="r-result" style="text-align: center;padding: 5px;">
                        <span style="font-size:20px">经度：</span><input type="text" name="" id="lng" value="" style="width: 150px;height: 30px"/>&nbsp;&nbsp;&nbsp;
                        <span style="font-size:20px">纬度：</span><input type="text" name="" id="lat" value="" style="width: 150px;height: 30px"/>
                        <input type="button" value="使用经纬度" id="sure" style="width: 80px;height: 32px;border-radius:5px;background: #A4CDFF;color: white"/>
                        <div style="height:30px;width:100%"></div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label for="address" class="col-sm-3 control-label">地址</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="address" required name="address" value="{$obj.address}">
                </div>
            </div>

            <div class="form-group">
                <label for="city" class="col-sm-3 control-label">城市</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="city" required name="city" value="{$obj.city}">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">分类：</label>
                <div class="col-sm-9">
                    <select name="class_id" class="form-control input-sm">
                        <option value="0">--请选择组别--</option>
                        <volist name="classes" id="group">
                            <option value="{$group['id']}" <if condition="$obj['class_id'] eq $group['id']">selected='true'</if>>{$group['name']}</option>
                        </volist>
                    </select>
                </div>
            </div>        

            <div class="form-group">
                <label class="col-sm-3 control-label">海报</label>
                <div class="col-sm-3">
                    <input type="file" name="head_pic_upload"/>
                </div>
                <div  class="col-sm-6" id="imgPreviewMore">
                    <div class='parents'><div class='one_del'>[-]</div><input type='hidden' value='{$obj.pic}' name='pic'/>
                                    <div><img src='{$obj.pic}' style='width: 150px;'></div></div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">相册</label>
                <div class="col-sm-9">
                    <input type="file" name="pic_upload" multiple/>
                    <span style="color: red">框选上传多张图片</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label"></label>
                <div id="imgPreviewMorePic">
                    <volist name="obj['photos']" id="vo">

                    <div class='parents' style='float: left'><div class='one_more_del'>[-]</div><input type='hidden' value='{$vo}' name='photos[]'/>
                                    <div><img src='{$vo}' style='width: 150px;'></div></div>
                    </volist>
                </div>
            </div>

            <div class="form-group">
                <label for="bgcolor" class="col-sm-3 control-label">颜色</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="bgcolor" name="bgcolor" value="{$obj.bgcolor}">
                </div>
            </div>

            <div class="form-group">
                <label for="address" class="col-sm-3 control-label">地址</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="address" name="address" value="{$obj.address}">
                </div>
            </div>

            <div class="form-group">
                <label for="remark" class="col-sm-3 control-label">备注</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="remark" name="remark" value="{$obj.remark}">
                </div>
            </div>

            <div class="form-group">
                <label for="content" class="col-sm-3 control-label">会场介绍：</label>
                <div class="col-sm-9">
                    <textarea name="content" class="form-control" id="content" style="width:auto;height:300px;visibility:hidden;" >{$obj['content']}</textarea>
                </div>
            </div>

            
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-9">
                  <button type="submit" class="btn btn-default btn-primary">确认修改</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!--主页面 end-->
<include file="Public:footer"/>
<script type="text/javascript">

    $("input[name='head_pic_upload']").on('change',function(){
        var filesize = this.files[0].size;
        if (filesize > 10000*1024) {
            alert("请上传大小在500k以下的图片");
            return false;
        }
        var files = this.files;
        console.log(files);
        for(var i=0;files.length;i++){
            var picname = files[i].name;
            var reader = new FileReader();
            reader.onload = function(e){
                var src = e.target.result;
                $.ajax({
                    type:"post",
                    url:"{:U('Meet/uploadPic')}",
                    data: {"pic":src,"pic_name":picname},
                    dataType : "json",
                    success : function(data){
                        if(data['flag'] == "success"){
                            $("#imgPreviewMore").append(" <div class='parents'><div class='one_del'>[-]</div><input type='hidden' value='"+data['data']['path']+"' name='pic'/>"+
                                    "<div><img src='"+data['data']['path']+"' style='width: 150px;'></div></div>");
                            bindClick();
                        }
                    }
                });
            }
            reader.readAsDataURL(files[i]);
        }
    });
    /**删除头像方法*/
    function bindClick() {
        $(".one_del").off("click");
        $(".one_del").click(function () {
            $(this).parent().remove();
        })
    }
    bindClick();


    /**上传多图方法*/
    
    $("input[name='pic_upload']").on('change',function(){
        var filesize = this.files[0].size;
        if (filesize > 10000*1024) {
            alert("请上传大小在500k以下的图片");
            return false;
        }
        var files = this.files;
        var i = '';
        for(i=0;files.length;i++){
            var picname = files[i].name;
            var reader = new FileReader();
            reader.onload = function(e){
                var src = e.target.result;
                $.ajax({
                    type:"post",
                    url:"{:U('Meet/uploadPic')}",
                    data: {"pic":src,"pic_name":picname},
                    dataType : "json",
                    success : function(data){
                        if(data['flag'] == "success"){
                            $("#imgPreviewMore").append("<div class='parents' style='float: left'><div class='one_more_del'>[-]</div>" +
                                    "<input type='hidden' value='"+data['data']['path']+"' name='photos[]'/>"+
                                    "<div><img src='"+data['data']['path']+"' style='width: 150px;'></div></div>");
                        }
                        bindClickMore();
                    }
                });
            }
            reader.readAsDataURL(files[i]);
        }
    });

    function bindClickMore() {
        $(".one_more_del").off("click");
        $(".one_more_del").click(function () {
            $(this).parent().remove();
        });
    }
    bindClickMore();


    /**高德地图*/
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    //为地图注册click事件获取鼠标点击出的经纬度坐标
    var clickEventListener = map.on('click', function(e) {
        document.getElementById("lng").value = e.lnglat.getLng();
        document.getElementById("lat").value = e.lnglat.getLat();
    });
    var auto = new AMap.Autocomplete({
        input: "tipinput"
    });
    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
    function select(e) {
        if (e.poi && e.poi.location) {
            map.setZoom(15);
            map.setCenter(e.poi.location);
        }
    }
    //点击关闭
    $(".close").click(function(){
        $("#map").hide();
    });
    /*点击使用该经纬度将值传给表单*/
    $("#sure").click(function(){
        var lng = $("#lng").val();
        var lat = $("#lat").val();
        $("#jd").val(lng);
        $("#wd").val(lat);
        if($("#jd").val(lng)){
            $(".close").click();
        }
    });
    //显示地图
    $("#test").click(function(){
        $(".modal-dialog").show();
    });
</script>


<script src="__WEBPUBLIC__/Common/kindeditor/kindeditor-min.js"></script>
<script src="__WEBPUBLIC__/Common/kindeditor/lang/zh_CN.js"></script>
<script>
    var editor;
    KindEditor.ready(function(K) {
        editor = K.create('textarea[name="content"]', {
            resizeType : 1,
            uploadJson : '__WEBPUBLIC__/Common/kindeditor/php/upload_json.php',
            fileManagerJson :
                    '__WEBPUBLIC__/Common/kindeditor/php/file_manager_json.php',
            allowPreviewEmoticons : false,
            items:[
                'source', '|', 'undo', 'redo', '|', 'cut', 'copy','|', 'justifyleft',
                'justifycenter', 'justifyright',
                'justifyfull', 'clearhtml', 'selectall', '|', 'formatblock',
                'fontname', 'fontsize', '|', 'forecolor',
                'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough','image','multiimage'
            ],
            afterBlur:function(){this.sync();}
        });
    });
</script>
